<html>
<head>
<title>Kittehs vs. Hammers!</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.5.1.min.js"></script>
<script src="pixastic.custom.js"></script>
<script src="image.js"></script>
<script src="query.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="image_search.js" type="text/javascript"></script>

<script>

// Merged stream of image results; each has "tbUrl", "which" (0|1), and "img"
var stream = [];

var item = [];
var cnt = new Array(2);
var current = 0;
var correct = 0;
var target;

var NEXT_ITEM_DELAY = 1500;
var PRESCORE_DELAY = 500;
//NEXT_ITEM_DELAY = 200; PRESCORE_DELAY = 100;

function displayTerms(s1, s2) {
  item[0] = s1;
  item[1] = s2;
  //target = Math.floor(Math.random()*1);
  target = 0
  $('.item0').each(function(){$(this).html(item[0]);});
  $('.item1').each(function(){$(this).html(item[1]);});
  $('.target').each(function(){$(this).html(item[target]);});
}

function enableStart(enabled) {
  // enable start button
  var el = document.getElementById("go");
  el.disabled = !enabled;
  if (enabled) {
    current = 0;
    correct = 0;
    for (i = 0; i < 2; i++) {
      el = document.getElementById("b" + i + "count");
      el.innerHTML = "0";
      cnt[i] = 0;
    }
  }
}

function startGame() {
  enableStart(false);
  nextItem();
}

function endGame() {
  var el = document.getElementById("go");
  el.innerHTML = "Restart game";  
  var finalScore = Math.ceil((correct / stream.length) * 100.0);
  alert("You got " + correct + " correct, and " + (stream.length - correct) 
      + " wrong, for a score of " + finalScore + "%!");
  enableStart(true);
}

function showImage(img) {
  var scope = document.getElementById("scope");
  scope.style.borderColor = "#aaf";
  scope.innerHTML = "";
  img.className = "focusedImage";
  scope.appendChild(img);
  setTimeout(function(){process(img); runRule();}, PRESCORE_DELAY);
}

function nextItem() {
  var i = stream[current];
  if (!i) { endGame(); }
  var img = i.img;
  showImage(img);  
}

function runRule() {
  var select = evaluate();
  score(select);
}

// select is true when the function chooses bucket0
function score(select) {
  var bucket = select ? 0 : 1;
  var success = (bucket == stream[current].which);
  var el = document.getElementById("b" + bucket + "count");
  el.innerHTML = ++cnt[bucket];
  el = document.getElementById("scope");
  el.style.borderColor = success ? "#4f4" : "#f44";
  
  if (success) { correct++; }
  
  // do this for now
  current++;
  setTimeout(nextItem, NEXT_ITEM_DELAY);
  return;

  // and this when we get it working
  var e2 = el.firstChild;
  var je2 = $('#scope>canvas');
  e2.style.position = 'absolute';
  top = je2.position().top;
  left = je2.position().left;
  e2.style.top = top;
  e2.style.left = left;
  je2.animate({
     opacity: 0.25,
     left: (success ? '-=300' : '+=300'),
     top: '+=200',
     height: 'toggle'
   }, 1000, function() {
     current++;
     setTimeout(nextItem, NEXT_ITEM_DELAY);
   });
}


function evaluate() {
  var el = document.getElementById("formula");
  var f = el.value;
  var result = false;
  try {
    result = eval(f);
  } catch (e) {
    el.style.backgroundColor = "#f44";
    el.focus();
    return;
  }
//  alert("result of " + f + " = " + result);
  return result;
}

</script>
</head>

<body>

<!--    GAME UI    -->
<div id="ui">
<h1>Let's play <span class="item0"></span> vs. <span class="item1"></span>!!1!</h1>

<p id=docs>
Your job: write a rule to select are attempting to write a function to
be "true" for pictures of the <span class="target"></span>s.
</p>

<div id="pipeline">
<!-- eventually the pipeline of images goes here -->
</div>

<div id="entry">
Your rule is... 
<input type=text id=formula onChange="evaluate()" 
  value="red()&gt;20 &amp;&amp; blue()&lt;40"></input>
</div>

<div id="hints">
<strong>Writing rules</strong>
<ul><li>Normal js operators work.</li>
<li>Use &amp;&amp; for "and", || for "or", etc.
<li>red() % of image that is "red" (also, "green()" and "blue()")</li>
<li>edgy() how "edgy" an image is (0-100)</li>
</ul>
</div>

<button id="go" onclick="startGame()">Start game!</button>

<div id="scope">
  <!-- image being processed goes here -->
  <img id="current" alt="current image" />
</div>

<div id="buckets">
  <div id="b0" class="bucket">
    <p class="count"><span id="b0count">0</span> <span class="item0"></span>s
    </p>
  </div>
  <div id="b1" class="bucket">
    <p class="count"><span id="b1count">0</span> <span class="item1"></span>s
    </p>
  </div>
</div>

</div>

</body>
</html>